<template>
    <div>
        <!-- 标题 -->
        <div >
            <van-nav-bar
            title="答题赢积分"
            left-text="返回"
            left-arrow
            @click-left="$router.push('/personal')"
            />
        </div>
         <!-- 背景 -->
        <div class="my-logo"></div>
        <van-progress
            :percentage="100"
            stroke-width="15"
            pivot-color="#E6A145"
            color="linear-gradient(to right, #D4B67D, #E6A145)"
            />
        <br>
        <!-- 内容 -->
        <div>
            <span id="uname_message" class="message">&nbsp;</span>
            <span id="uname_message" class="message">&nbsp;</span>
            <span id="uname_message" class="message">&nbsp;</span>
            <van-index-anchor index="1">
                <van-icon name="star-o"  color="#E6A145"/>
                答题一{{Applications[0].aname}}
            </van-index-anchor>
            <br>
            <van-radio-group v-model="radio">
                    <van-cell-group >
                        <van-cell :title=" `${Applications[0].answer1}`" clickable @click="radio = '1'">
                            <template #right-icon>
                                <van-radio name="1" />
                            </template>
                        </van-cell>
                        <br>
                        <van-cell :title=" `${Applications[0].answer2}`" clickable @click="radio = '2'">
                            <template #right-icon>
                                <van-radio name="2" />
                            </template>
                        </van-cell>
                        <br>
                        <van-cell :title=" `${Applications[0].answer3}`" clickable @click="radio = '3'">
                            <template #right-icon>
                                <van-radio name="3" />
                            </template>
                        </van-cell>
                        <br>
                        <van-cell :title=" `${Applications[0].answer4}`" clickable @click="radio = '4'">
                            <template #right-icon>
                                <van-radio name="4" />
                            </template>
                        </van-cell>
                    </van-cell-group>
            </van-radio-group>
                <br>
                <br>
                <span id="uname_message" class="message">&nbsp;</span>
                <van-button color="#E6A145" plain>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;放弃&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button>
                <van-button color="#E6A145" plain>&nbsp;&nbsp;&nbsp;&nbsp;提交结果&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button>
                <van-button color="#E6A145" plain @click="next">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;下一题 >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</van-button> 
        </div>
        

       
        
    </div>
</template>

<script>
import httpApi from '@/http';
import Vue from 'vue';
import { Cell, CellGroup } from 'vant';
Vue.use(Cell);
Vue.use(CellGroup);


    export default {
        data(){
            return{
                Applications:[],
                indexList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
            }
        },
        methods:{
            listAnswer(){
                let params = {page:1,pagesize:1}
                httpApi.ApplicationApi.queryAll( params ).then((res) => {
                // console.log("问题", res);
                this.Applications = res.data.data;
                }); 
            },
            next(){ 
            }
        },
        mounted(){
            this.listAnswer()
        }
        
    }
</script>

<style lang="scss" scoped>
.my-logo {
  width: 100%;
  height: 15vw;
  padding: 20px 0;
  background-image: url("@/assets/img/modify.jpg");
  
  }
  van-button{
    border-color: #E6A145;
  }
</style>
<style scoped>
::v-deep .van-nav-bar__text {
  color: #000;
}
::v-deep .van-nav-bar .van-icon {
  color: #000;
}
::v-deep .van-index-anchor{
    font-size: 18px;
    font-weight: 600;
}
::v-deep .van-cell--clickable{
    border: 1px solid gray;
    margin-left: 20px;
    margin-top:10px ;
    width: 90%;
}
</style>